import React from 'react'
import PropTypes from 'prop-types'
import { List, Skeleton, Button } from 'antd'

export default class extends React.PureComponent {

  static propTypes = {
    initLoading: PropTypes.bool,
    loading: PropTypes.bool,
    isDisable: PropTypes.bool,
    list: PropTypes.array,
    onLoadReduxMore: PropTypes.func,
    renderItem: PropTypes.func,
  }

  static defaultProps = {
    initLoading: true,
    loading: true,
    isDisable: false,
    list: [],
    onLoadReduxMore: () => { },
    renderItem: () => { },
  }

  render() {
    const { initLoading, loading, isDisable, list, onLoadReduxMore, renderItem } = this.props

    const loadMore = !initLoading && !loading ? (
      <section style={{ textAlign: 'center', marginTop: 16, height: 32 }}>
        <Button
          onClick={onLoadReduxMore}
          style={{ paddingRight: 40, paddingLeft: 40 }}
          disabled={isDisable}
        >
          {isDisable ? '没有更多了' : '加载更多'}
        </Button>
      </section>
    ) : null

    return (
      <List
        loading={initLoading}
        loadMore={loadMore}
        dataSource={list}
        renderItem={item => (
          <List.Item style={{ marginBottom: 16, padding: 16, borderRadius: 3, backgroundColor: '#fff' }}>
            <Skeleton title={false} loading={item.loading} active>
              <section style={{ width: '100%', height: 330 }}>
                {renderItem(item)}
              </section>
            </Skeleton>
          </List.Item>)
        }

        itemLayout='horizontal'
        size='small'
        style={{ minHeight: 300 }}
      />
    )
  }
}